<template>
	<view class="logins">
		<nav-bar isBack  title="我的足迹" ></nav-bar>
		<view class="s_cTabs">
			<view class="s_ctItem" v-for="(item,index) in carTypes" :class="{active:current==index}" :data-current="index" @tap="tabChange">{{item.name}}<text></text></view>
		</view>	
		<view class="s_cCan">
			<swiper class="s_cSwiper" @change="swiperChange" :current="current">
				<!-- 商品 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="nextPage">
					  <view class="l_cgItem" v-for="(item,index) in goodsList" :key="index" @click="natos(item)">
					  	<view class="l_cgImage"><image :src=" item.main_imgurl"></image>
						</view>
					  	<view class="l_cgCont">
					  		<view class="l_cgName omit-2">{{item.product_title}}</view>
					  		<view class="l_cgTags">
					  			<view class="l_cgTag"></view>
					  		</view>
					  		<view class="l_cgPrice">
					  			<!-- <text class="l_cgCost">￥<text>{{item.primary_price}}</text></text> -->
					  			<text class="l_cgFee">￥<text>{{item.price}}</text></text>
					  			<view class="yprice" v-if="item.rate_price"><i>底价</i>￥<text>{{item.rate_price}}</text></view>
					  		</view>
					  		<view class="icond iconfont icon-shopping"></view>
					  	</view>
					  </view>
					  <view class="nolist" v-if="goodsList.length == 0">
						  <image src="https://manager.ryz1620.com/static/my/suess.png"></image>
						  <text>暂无数据</text>
					  </view>	  
					</scroll-view>	
				</swiper-item>
				<!-- 案例 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="shopPage">
					  <view v-for="(items,index) in demoList" :key="index">
						  <view style="font-size: 30rpx;font-weight: bold;margin-top: 20rpx;padding: 0 30rpx;">{{items.date}}</view>
						   <view class="l_cgItem" v-for="(item,index) in items.list" :key="index" @tap="toDetail(item.id)">
							<view class="l_cgImage"><image :src=" item.thumb_url[0].path"></image>
							 <view class="i_tBtn" @tap.stop="dviewr(item.display_url)" v-if="item.display_url">
							 	<view class="i_tbImg"><image src="@/static/home/3d.png"></image></view>
							 	<view class="i_tbTxt">3D</view>
							 </view>
							</view>
							<view class="l_cgCont">
								<view class="l_cgName omit-2">{{item.title}}</view>
								<view class="l_cgTags">
									<view class="l_cgTag"></view>
								</view>
								<view class="l_cg">
									<text class="l_cgF"><text>{{item.house_type}}</text></text>
								</view>
							</view>
						   </view>
					  </view>	 
					  <view class="nolist" v-if="demoList==''">
						  <image src="https://manager.ryz1620.com/static/my/suess.png"></image>
						  <text>暂无数据</text>
					  </view>	  
					</scroll-view>	
				</swiper-item>
				<!-- 动态 -->
				<swiper-item class="s_cSwiper-item">
					<scroll-view class="s_dList" scroll-y @scrolltolower="themePage">
					  <view v-for="(item,indexs) in themeList" :key="indexs" class="p_dDyna">
						  <view style="font-size: 30rpx;font-weight: bold;margin-top: 20rpx;padding: 0 30rpx;">{{item.date}}</view>
						  <view v-for="(items,index) in item.list" :key="index" style="padding: 10rpx 25rpx; padding-top: 25rpx;" @click="toTarnd(items.id,items.type)">
						  	<view class="p_ddItem">
						  		<view class="p_ddTags">
						  			<view v-for="item in items.tags">
						  				<view class="p_ddTag">
						  					<view class="p_ddTag-icon"><image src="/static/common/icon_topic.png"></image></view>
						  					<text>{{item}}</text>
						  				</view>
						  			</view>
						  		</view>
						  		<view class="p_ddCont">
						  			<view class="p_ddText">
						  				<view>
						  					<view>{{items.title}}</view>
						  				</view>
						  			</view>
						  			<view class="p_ddImgs">
						  				<view v-for="item in items.media" v-if="items.type == 0" :key="item.id" @tap.stop="preview(index,items.media)">
						  					<view class="p_ddImg"><image :src="item.path"></image></view>
						  				</view>
										<view v-for="item in items.media" v-if="items.type == 1" :key="item.id">
											<view class="p_ddImg"><video style="width: 205rpx;height: 205rpx;" id="myVideo" :src="item.path" controls></video></view>
										</view>
						  			</view>
						  		</view>
						  		<view class="p_funs">
						  			<view class="p_fun">
						  				<view class="p_fIcon iconfont icon-transpond"></view>
						  				<text>{{items.forward_num}}</text>
						  			</view>
						  			<view class="p_fun">
						  				<view class="p_fIcon iconfont icon-comments"></view>
						  				<text>{{items.comment_num}}</text>
						  			</view>
						  			<view class="p_fun" >
						  				<view class="p_fIcon" v-if="items.support_status == 1"><image src="/static/common/icon_collection.png"></image></view>
						  				<view class="p_fIcon" v-else><image src="/static/common/icon_collection2.png"></image></view>
						  				<text>{{items.support_num}}</text>
						  			</view>
						  		</view>
						  	</view>
						  </view>
						  
					  </view>	
					  <view class="nolist" v-if="themeList==''">
						  <image src="https://manager.ryz1620.com/static/my/suess.png"></image>
						  <text>暂无数据</text>
					  </view>	  
					</scroll-view>	
				</swiper-item>
			</swiper>	
		</view>			
	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import service_my from '@/service/my.js'
import service_mall from '@/service/mall.js'
import service_oneN from '@/service/oneN.js'
import URL from '@/config/url.js'


export default {
	components: { navBar },
	
	data() {
		return {
			carTypes:[
				{
				  name:'商品'
				},
				{
				  name:'案例'
				},
				{
				  name:'动态'
				},
			],
			
			current:0,
			goodsList:[],
			goodspage:1,
			demoList:[],
			demoListpage:1,
			themeList:[],
			themepage:1,
		}
	},
	onLoad() {
		this.$utils.getUrl()
		this.getList()
		this.getdemoListpageList()
		this.getthemepageList()
	},
	filters: {
		formatDate(value) {
			let date = new Date(parseInt(value) * 1000);
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			m = m < 10 ? "0" + m : m;
			let d = date.getDate();
			d = d < 10 ? "0" + d : d;
			let h = date.getHours();
			h = h < 10 ? "0" + h : h;
			let minute = date.getMinutes();
			let second = date.getSeconds();
			minute = minute < 10 ? "0" + minute : minute;
			second = second < 10 ? "0" + second : second;
			return y +"-" + m + "-" + d + " " + h + ":" + minute + ":"+second;
		}
	},
	methods: {
		navto(url){
			uni.navigateTo({
				url
			})
		},
		dviewr(item){
			let url = encodeURIComponent(item)
			uni.navigateTo({
				url: '/pages_3D/pages/3D/panorama?url='+ url 
			});
		},
		toTarnd(id,type){
			if(type == 0){
				uni.navigateTo({ url: '/pages_design/pages/design/dynamic/dynamic?trendId=' + id})
			}else{
				uni.navigateTo({ url: '/pages_design/pages/design/dynamic/player?trendId=' + id})
			}
		},
		toDetail(caseId) {
			uni.navigateTo({ url: '/pages_design/pages/design/demo/demo?caseId=' + caseId })
		},
		natos(item){
			uni.navigateTo({
				url:'/pages_mall/pages/mall/goods_details/goods_details?id=' + item.product_id
			})
		},
		tabChange(e){
				var index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current = index;
		},
		swiperChange(e) {
				var index = e.target.current || e.detail.current;
				this.current = index;		
		},
		nextPage(){
			this.goodspage++
			this.getList()
		},
        getList(){
        	uni.showLoading()
        	service_my.getlogList({
        		 page:this.goodspage
        	})
        		.then(res => {
        			uni.hideLoading()
					let data = res.data.data
					// console.log(data);
					// this.goodsList = data
					for(let i = 0;i<data.length;i++){
						this.goodsList.push(data[i])
					}
        		})
        		.catch(err => {
        			uni.hideLoading()
        		})
        },
		shopPage(){
			this.demoListpage++
			this.getdemoListpageList()
		},
		getdemoListpageList(){
			uni.showLoading()
			service_my.getCaseTrace({
				 page:this.demoListpage
			})
				.then(res => {
					uni.hideLoading()
					let data = res.data
					for(let i = 0;i<data.length;i++){
						this.demoList.push(data[i])
					}
				})
				.catch(err => {
					uni.hideLoading()
				})
		},
		// 预览图片
		preview(index, urls) {
			let img_url =[]
			for(let i = 0; i<urls.length;i++){
				img_url.push(
					 urls[i].path	
				);				
			}
			uni.previewImage({
				urls: img_url,
				current: index,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		themePage(){
			this.themepage++
			this.getthemepageList()
		},
		getthemepageList(){
			uni.showLoading()
			service_my.getTrendTrace({
				 page:this.themepage
			})
				.then(res => {
					uni.hideLoading()
					let data = res.data
					for(let i = 0;i<data.length;i++){
						this.themeList.push(data[i])
					}
				})
				.catch(err => {
					uni.hideLoading()
				})
		},
	}
}
</script>

<style lang="scss" scoped>
.logins{
	width: 100vw;height: 100vh;background: #fff;display: flex;flex-flow: column;
}
.s_cTabs {height: 100rpx;position: relative;display: flex;z-index: 500;background: #fff;
	.s_ctItem {font-size: 30rpx;color: #939393;  display: flex;justify-content: center;align-items: center;flex: 1;
		&.active {font-weight: bold;position: relative;color: #303030;
		 text{
			width: 40rpx;height: 6rpx;border-radius: 4rpx 4rpx;background: #FFD425;position: absolute;bottom: 0;    left: 50%;margin-left: -20rpx;z-index: 1;; 
		 }
		}
	}
	.s_ctCursor {width: 40rpx;height: 8rpx;border-radius: 4rpx 4rpx;background: #ffd425;position: absolute;bottom: 0;left: 0;z-index: 1;transform: translateX(166rpx);}
}
.s_cCan{
	height: 100%;
}
.estateItem {
					padding: 40rpx 30rpx;
					position: relative;
					width: 100%;
					height: 270rpx;
					display: flex;
					border-bottom: 2rpx solid #F4F4F4;

					.itemImg {
						overflow: hidden;
						width: 224rpx;
						height: 188rpx;
						margin-right: 24rpx;
						border-radius: 4rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 4rpx;
						}
					}

					.itemInfo {
						
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.infoTitle {
							width: 434rpx;
							font: 600 28rpx/48rpx PingFang SC;
							color: #333333;
							display: flex;
							align-items: center;
							justify-content: space-between;

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}

						.infoTime {
							font: 400 24rpx/40rpx PingFang SC;
							color: #333333;
						}

						span {
							font: 400 24rpx/48rpx PingFang SC;
							color: #FF615D;
						}
					}
				}
.i-dcont{
	padding: 30rpx;
	min-height: 104rpx;
	padding-left: 150rpx;
	position: relative;
	.i-img{
		width: 104rpx;
		height: 104rpx;
		position: absolute;
		left: 30rpx;
		top:30rpx;
		border-radius: 50%;
		background: #f9f9f9;
		overflow: hidden;
	}
	.i-tit{
		line-height: 52rpx;
		padding-right: 140rpx;
		text{
			display: block;
		}
		.text1{
			font-size: 32rpx;
			color: #333333;
		}
		.text2{
			font-size: 24rpx;
			color: #939393;
		}
	}
	.i-mk{
		position: absolute;
		right: 30rpx;
		top:54rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 25rpx;
		border-radius: 30rpx;
		border: 1px #ccc solid;
		color: #939393;
	}
}
.itemInfo .i-mk{
		position: absolute;
		right: 30rpx;
		top:40rpx;
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 25rpx;
		border-radius: 30rpx;
		border: 1px #ccc solid;
		color: #939393;
	}
.nolist{
	margin-top: 200rpx;
	line-height: 80rpx;
	text-align: center;
	color: #939393;
}
.nolist image{
	display: block;
	width: 288rpx;
	height: 232rpx;
	margin: auto;
}
.s_dList{
	height: 100%;
}
.i_cList {padding: 0 32rpx;display: flex;}
		.i_cLeft {flex: 1;}
		.i_cLeft:first-child {padding-right: 12rpx;}
		.i_cLeft:last-child {padding-left: 12rpx;}
		.i_cRight {flex: 1;}
		.i_cItem {width: 100%;padding-bottom: 38rpx;border-radius: 8rpx;overflow: hidden;}
		.i_cImage {width: 100%;background: #f6f7fb;
			> image {height: 360rpx;}
		}
		.i_cTag {height: 44rpx;line-height: 44rpx;color: #a58f6d;font-size: 20rpx;padding: 0 16rpx 0 48rpx;margin: 16rpx 16rpx 0;border-radius: 22rpx;background: #f9f6f3;position: relative;display: inline-block;
			.i_ctIcon {width: 36rpx;height: 36rpx;position: absolute;top: 4rpx;left: 4rpx;}
		}
		.i_cText {line-height: 36rpx;font-size: 24rpx;margin: 16rpx 20rpx 0;}
		.i_cUser {margin: 16rpx 16rpx 0;}
		.i_cHead {width: 36rpx;height: 36rpx;margin-right: 8rpx;border-radius: 50%;background: #f6f7fb;float: left;overflow: hidden;}
		.i_cPraise {height: 36rpx;color: #939393;font-size: 20rpx;float: right;display: flex;align-items: center;}
		.i_cpIcon {width: 32rpx;height: 32rpx;margin: 0 8rpx;}
		.i_cName {height: 36rpx;line-height: 36rpx;color: #939393;font-size: 20rpx;overflow: hidden;}
// 装修案例
.l_dDemo {padding: 28rpx 0 40rpx;
	.l_ddItem {padding: 42rpx 0 40rpx;
		&:nth-child(1) {padding-top: 0;}
	}
	.l_ddBanner {height: 376rpx;margin: 0 32rpx;border-radius: 8rpx;background: #f0f0f0;overflow: hidden;position: relative;}
	.l_ddInfo {line-height: 34rpx;font-size: 24rpx;margin: 18rpx 32rpx 0;}
	.l_ddTag {height: 36rpx;line-height: 36rpx;color: #a98f68;font-size: 20rpx;padding: 0 20rpx;margin-top: -2rpx;margin-right: 16rpx;border-radius: 18rpx;background: #f9f6f3;float: left;}
	.l_ddCont {overflow: hidden;}
	.l_ddVal {display: flex;flex-wrap: wrap;align-items: center;}
	.l_ddCutLine {width: 1px;height: 12rpx;margin: 0 8rpx;background: #333;display: inline-block;
		&:nth-last-child(1) {display: none;}
	}
	.l_ddRemark {line-height: 44rpx;font-size: 32rpx;font-weight: bold;padding-left: 36rpx;margin-top: 8rpx;}
}
		.l_cgItem {height: 180rpx;margin: 32rpx 32rpx 0;background: #fff;border-radius: 8rpx;overflow: hidden;position: relative;}
		.l_cgImage {width: 180rpx;height: 180rpx;float: left;position: relative;}
		.l_cgCont {padding-left: 20rpx;overflow: hidden;}
		.l_cgName {min-height: 80rpx;line-height: 40rpx;}
		.l_cgTags {height: 32rpx;margin-top: 14rpx;display: flex;}
		.l_cgTag {height: 32rpx;line-height: 32rpx;font-size: 22rpx;color: #939393;padding-right: 24rpx;position: relative;
			&::after {content: "";width: 1px;height: 14rpx;background: #939393;position: absolute;top: 50%;right: 12rpx;transform: translateY(-50%) scaleX(.5);}
			&:last-child::after {content: none;}
		}
		.l_cgPrice {}
		.l_cgFee {color: #C3AB7C;font-size: 34rpx;font-weight:normal;padding-left: 4rpx;display: block;text-align: left;
			& > text {font-size: 32rpx;}
		}
		.l_cgCost {text-decoration: line-through;color: #939393;font-size: 14rpx;
			& > text {font-size: 18rpx;}
		}
		.l_cgSell {height: 32rpx;line-height: 32rpx;color: #939393;font-size: 22rpx;margin-top: 10rpx;}
.icond{
	    display: block;
	    width: 60rpx;
	    height: 60rpx;
	    position: absolute;
	    right: 0;
	    background: #F8F8F8;
	    border-radius: 50%;
	    bottom: 0;
	    text-align: center;
	    line-height: 60rpx;
}
		.l_cg{
			line-height: 40rpx;
			overflow: hidden;
			.l_cgF{
				color: #999;
			}
		}
	// 设计动态
	.p_dDyna {overflow: hidden;
		.p_ddItem {box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.15);border-radius: 15rpx; overflow: hidden;}
		// 用户信息
		.p_ddUser {padding: 0 32rpx;}
		.p_ddHead {width: 84rpx;height: 84rpx;margin-right: 20rpx;border-radius: 50%;background: #f0f0f0;overflow: hidden;float: left;}
		.p_ddCan {padding-top: 6rpx;overflow: hidden;}
		.p_ddName {height: 40rpx;line-height: 40rpx;font-weight: bold;}
		.p_ddTime {height: 34rpx;line-height: 34rpx;color: #939393;font-size: 24rpx;}
		// 标签
		.p_ddTags {margin: 18rpx 32rpx 0;overflow: hidden;}
		.p_ddTag {height: 44rpx;line-height: 44rpx;color: #a58f6d;font-size: 24rpx;padding: 0 20rpx 0 48rpx;border-radius: 22rpx;background: #f9f6f3;position: relative;float: left;}
		.p_ddTag-icon {width: 36rpx;height: 36rpx;position: absolute;top: 4rpx;left: 4rpx;}
		// 内容
		.p_ddText {line-height: 44rpx;margin: 28rpx 36rpx 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
		.p_ddAll {height: 36rpx;line-height: 36rpx;color: #a98f68;font-size: 26rpx;margin-top: 8rpx;position: relative;}
		.p_ddAll-click {width: 140rpx;height: 70rpx;position: absolute;top: -18rpx;left: -36rpx;}
		.p_ddImgs {padding: 18rpx 0 0 32rpx;overflow: hidden;}
		.p_ddImg {width: 205rpx;height: 205rpx;margin: 12rpx 14rpx 0 0;border-radius: 4rpx;background: #f0f0f0;overflow: hidden;float: left;}
		// 底部功能键
		.p_funs {padding: 20rpx 32rpx 22rpx;display: flex;			}
		.p_fun {height: 74rpx;display: flex;flex: 1;justify-content: center;align-items: center;
			&:nth-child(1) {justify-content: flex-start;}
			&:nth-last-child(1) {justify-content: flex-end;}
		}
		.p_fIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;color: #6c6c6c;font-size: 40rpx;margin-right: 16rpx;display: inline-block;}
	}		
.i_tBtn {width: 70rpx;height: 70rpx;background: rgba(0, 0, 0, .4);border: 1px solid #fff;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}
.i_tbImg {width: 22rpx;height: 22rpx;margin: 15rpx auto 0;}
.i_tbTxt {width: 100%;height: 24rpx;line-height: 24rpx;text-align: center;color: #fff;font-size: 18rpx;position: absolute;top: 38rpx;left: 0;}		
</style>